var zhengZhou = document.querySelector(".zhengzhou")
console.log(zhengZhou)
var area = document.querySelector(".nav-left .area")
var x = document.querySelector(".nav-left .area p i")
console.log(x)
var span = document.querySelectorAll(".nav-left .area .area-ul .span span")
console.log(span)

zhengZhou.onclick = function(ev){
    zhengZhou.style="background-color: #ffffff; border: 1px solid #ccc;border-bottom: none;"
    area.style="display: block;"
    ev.stopPropagation();
}
document.onclick = function(ev){
    ev.stopPropagation();
    area.style="display: none;"
    zhengZhou.style.cssText=""
}
area.onclick = function(ev){
    ev.stopPropagation();
    zhengZhou.style="background-color: #ffffff; border: 1px solid #ccc;border-bottom: none;"
    area.style="display: block;"
}
x.onclick = function(ev){
    ev.stopPropagation();
    area.style="display: none;"
    zhengZhou.style.cssText=""
}
span[0].onclick = function(){
    span[0].classList.add("span3")
    span[1].classList.remove("span3")
    prov.style="display: block;"
    city.style="display: none;"

}
span[1].onclick = function(){
    span[0].classList.remove("span3")
    span[1].classList.add("span3")
    prov.style="display: none;"
    city.style="display: block;"
}

var prov = document.querySelector(".province1")
var city = document.querySelector(".province2")